<template>
  <div class="all-can-use-components">
    <div
      class="use-components-item"
      v-for="(item, index) in lowCodeLists.componentGrouped"
      :key="index"
    >
      <div class="padding-b-10">{{ item.title }}</div>
      <div class="flex">
        <span
          class="add-grouped-item"
          :class="currentIndex == i ? 'groupedActive' : ''"
          v-for="(val, i) in item.componentLists"
          :key="i"
          @click="clickComponentItem(val,i)"
        >
          <img :src="`../src/assets/${val.icon}`" alt="" class="i-icon" />
          <div>{{ val.name }}</div>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import useLowCode from "@/store/useBaseLowCode";

let lowCodeLists = useLowCode();

let currentIndex = ref(null);

const clickComponentItem = (item, index) => {
  currentIndex.value = index;
  lowCodeLists.setLowCodeDatas(JSON.parse(JSON.stringify(item)));
};
</script>

<style scoped>
.i-icon {
  width: 25px;
  height: 25px;
  margin-bottom: 8px;
}
.groupedActive {
  color: #fff;
  background: #155bd4;
}
.padding-b-10 {
  padding-bottom: 10px;
}
.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.add-grouped-item {
  font-size: 12px;
  width: 80px;
  height: 80px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.all-can-use-components {
  top: 50px;
  height: calc(100vh);
  width: 180px;
  background: #f5f6f9;
  overflow-y: auto;
  box-sizing: border-box;
}
.use-components-item {
  font-size: 18px;
  padding: 30px 10px;
  padding-right: 0;
}
</style>
